<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    v-show：指令的作用是切换元素的显示状态
        原理： 通过修改元素的display属性，实现显示隐藏
        v-show后面的值 会被解析为 boolean类型   当取值为true 元素显示
        当取值为false  元素隐藏
-->

<!--    v-if：根据表达式的真假来切换元素的显示状态 本质是通过操纵dom元素来切换显示状态-->
    <img v-if="isflag" src="img/img.png" height="556" width="539"/>

<!--    v-else-if: 也不能单独使用  当其表达式的值为true时 标签显示-->
    <p v-else-if="!isflag">图片丢了</p>
<!--    v-else： 不能单独使用 要和v-if结合使用 -->
<!--    <p v-else>图片丢了</p>-->

    <input type="button" value="click" @click="show()">
</div>
<script>
   var app = new Vue({
       el: '#app',
       data: {
           isflag: true
       },
       methods: {
        show (){
            //通过控制isflag的取值来控制元素的显示、隐藏
            this.isflag = !this.isflag
        }
       }
   })
</script>
</body>
</html>
